<template>
    <div class="video" :key="bvid">
        <nav-bar></nav-bar>
        <div class="player-wrap">
            <player :last='false' :key="$bvid" v-if="!$route.query.p" :aid="detail.View.aid" :fulllength="detail.View.duration" :cid="detail.View.cid" :poster="detail.View.pic+'@480w_270h_1c'"></player>
            <player :last='page==detail.View.pages.length-1?true:false' :key='page' v-else :bvid="bvid" :cid="detail.View.pages[page].cid" :poster="detail.View.pic+'@480w_270h_1c'"></player>    
        </div>
        <van-collapse class="info" v-model="activeNames">
            <van-collapse-item name="1">
                <div slot="title">
                    <p class="title">{{detail.View.title}}</p>
                    <div>
                        <span class="uper">
                            <label>UP</label>
                            {{detail.View.owner.name}}
                        </span>
                        <span>
                            {{detail.View.stat.view>10000?(detail.View.stat.view/10000).toFixed(1)+'万':detail.View.stat.view}}观看
                        </span>
                        <span>
                            {{detail.View.stat.danmaku>10000?(detail.View.stat.danmaku/10000).toFixed(1)+'万':detail.View.stat.danmaku}}弹幕
                        </span>
                    </div>
                </div>
                <div>
                    <p>{{detail.View.desc}}</p>
                    <div class="channel">
                        <router-link to="/">主页</router-link>>
                        <router-link :to="'/channel/'+parentChannel.rid">{{parentChannel.name}}</router-link>>
                        <router-link :to="'/channel/'+parentChannel.rid+'/'+detail.View.tid">{{detail.View.tname}}</router-link>
                    </div>
                    <ul class="tags">
                       <li v-for="(item,index) in detail.Tags" :key='index'>{{item.tag_name}}</li>
                    </ul>
                </div>
            </van-collapse-item>
        </van-collapse>
        <div class="pages" v-if='detail.View.pages.length>1'>
                <i class="van-icon van-icon-arrow" @click="popupshow=true"></i>
                <van-tabs>
                    <van-tab v-for='(item, index) in detail.View.pages' :key="index">
                        <router-link @click="page=index" :to="{query:{p:index+1}}" slot="title" :class="'item '+(page==index?'choose':'')">
                            {{item.part}}
                        </router-link>
                    </van-tab>
                </van-tabs>
            <van-popup class="popup" v-model="popupshow" position="bottom" closeable>
                <p >分集({{detail.View.pages.length}})</p>
                <ul>
                    <li v-for='(item, index) in detail.View.pages' :key="index" @click="page=index">
                        <router-link :class="page==index?'choose':''" :to="{query:{p:index+1}}">{{item.part}}</router-link>
                    </li>
                    <div v-if="detail.View.pages.length%2==1" style="width:43vw"></div>
                </ul>
            </van-popup>
        </div>
        <div class="more">
            <van-tabs v-model="moreactive">
                <van-tab :class="moreactive==0?'choose':''">
                    <div slot="title"  :class="moreactive==0?'choose':''">热门分享</div>
                    <block-list :list='detail.hot_share.list' :duration='true'></block-list>
                  
                </van-tab>
                <van-tab  :class="moreactive==1?'choose':''">
                    <div slot="title"  :class="moreactive==1?'choose':''">相关推荐</div>
                    <block-list :list='detail.Related' :duration='true'></block-list>
                </van-tab>
                <van-tab :class="moreactive==2?'choose':''" >
                    <div slot="title"  :class="moreactive==2?'choose':''">评论{{detail.Reply.page.acount}}</div>
                    <replies :oid="detail.View.aid"></replies>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>


<script>
import NavBar from '../components/common/NavBar.vue';
import Player from '../components/common/Player.vue';
import BlockList from '../components/common/BlockList';
import Replies from '../components/common/Replies.vue';
export default {
    components:{
        NavBar,
        Player,
        BlockList,
        Replies,
    },
    data(){
        return{
            bvid:this.$route.params.bvid,
            detail:{},
            activeNames:[],
            parentChannel:{},
            popupshow:false,
            moreactive:1,
            page:this.$route.query.p-1
        }
    },
    watch:{
        '$route.query.p'(now){
            this.page=now-1
        },
        '$route.params.bvid'(){
            this.$router.go(0)
            //this.getData()
        }
    },
    methods:{
        showPopup() {
        this.popupshow = true;
        },
        getData(){
            this.$axios.get('/static/x/web-interface/view/detail',{
                params:{
                    aid:'',
                    bvid:this.$route.params.bvid,
                    need_hot_share:1
                }
            }).then(res=>{
                this.detail=res.data.data,
                console.log(this.detail)
                this.tid=this.detail.View.tid
                this.parentChannel=this.$categorys.filter(res=>{
                    return res.child&&res.child.filter(ss=>{
                        return ss.rid==this.tid
                    }).length>0
                })[0]
                this.bvid=this.$route.params.bvid
            })
        }
    },
    created(){  
        this.getData()
    }
}
</script>
<style lang="less" >
@import '../assets/css/common';
.info{
        
    .van-cell{
        padding: 1rem 1rem 0 1rem;
        line-height: 2rem;
        font-size: 1rem;
        &::after{
            display: none ;
        }
    }
    .van-collapse-item__content{
        padding: 0 1rem ;
    }
}
.video{
    .van-tab{
        line-height: 2rem;
        font-size: 1rem;
    }
    .van-icon-arrow{
        &::before{
                transform: rotate(90deg);
                font-size: 1.3rem;
                color:#888
            }
            background-color: #fff;
            float: right;
            height: 100%;
    }
    .pages{
        background-color: #fff;
        .van-icon-arrow{
            padding: 2.1rem 1rem;
            display: inline-block;
        }
    }
}
.pages{
    .van-tabs__wrap--scrollable .van-tab{
        padding: 0 ;
    }
    .van-tabs__line{
        display: none;
    }
    .van-tabs--line .van-tabs__wrap{
        height: fit-content;
    }
}
.more{
        .blocklist{
            background-color: #fff;
            .blockitem{
                .cover{
                    border-radius: 0.5rem !important;
                }
            }
        }
        .van-tabs--line .van-tabs__wrap{
            height: 3rem;
        }
        .van-tabs__line{
            width: 4.5rem;
            background-color: @color;
            height: 0.15rem;
        }
        .van-tab{
            font-size: 1.15rem;
        }
    }
</style>

<style lang='less' scoped>
@import '../assets/css/common';
.video{
    font-family: 'iconfont' !important;
    .player-wrap{
        width: 100vw;
        height: 100vw * 9 / 16;
        background-color: #f4f4f4;
    }
    .pages{
        position: relative;
        border-bottom: 0.3px solid #ccc;
        border-top: 0.3px solid #ccc;
        .popup{
            background-color: #f4f4f4;
            padding: 0 0.7rem;
            box-sizing: border-box;
            height: 53.8vh;
            p{
                font-size: 1.3rem;
                margin: 1rem 0 0 0.5rem;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                li{
                    margin: 1rem 0 0 0;
                    a{
                        background-color: #fff;
                        border: 0.1rem solid #ccc;
                        display: inline-block;
                        border-radius: 0.3rem;
                        padding: 0 0.5rem;
                        width: 40vw;
                        color: #000;
                        height: 5.4rem;
                    }
                }
            }
        }
        .item{
            display: block;
            color: #646566;
            border: 0.1rem solid #ccc;
            height: 3.5rem;
            width: 10rem;
            margin:1rem 0.7rem  0 0;
            font-size: 1rem;
            padding: 0 0.5rem;
            border-radius: 0.3rem;
        }
        .choose{
            color: @color !important;
            border-color:@color !important;
        }
    }
    .info{
        .title{
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
            max-width: 87vw;
        }
        span{
            font-size: 1rem;
            margin-right: 0.8rem;
            color: #999;
            &.uper{
                color:#000;
                margin-right: 1rem;
                label{
                    border: 0.1rem solid #000;
                    border-radius: 0.2rem;
                    font-size: 0.7rem;
                    padding: 0.1rem 0.15rem 0rem 0.1rem;
                }
            }
        }
        p{
            font-size: 1rem;
        }
        .channel
        {
            margin-top: 0.6rem;
            font-size: 1rem;
            color:#ccc;
            :first-child{
                margin-left: 0;
            }
            a{
                color: @color;
                margin: 0 0.6rem;
            }
        }
        .tags{
            padding: 0.3rem 0;
            font-size: 1rem;
            color: #000;
            display: flex;
            flex-wrap: wrap;
            li{
                color: #666;
                padding:0.6rem 1.5rem;
                background-color: #f4f4f4;
                border-radius: 2rem;
                margin: 0.5rem 1rem 0 0;
            }
        }


    }
    .more{
        .choose{
            color: @color;
        }
    }
    

}

</style>